<template>
  <div >
    <!-- 基本信息 -->
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item" />
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">基本信息</span>
    </div>
    <van-field readonly required name="city" :value="fromdata.city" label-width="3em" label="地市："/>
    <van-field readonly required name="counties" :value="fromdata.counties" label-width="3em" label="县区："/>
    <van-field readonly required  autosize  type="textarea" rows='1'  name="projectEstablishName" :value="fromdata.projectEstablishName" label="立项项目名称：" label-width="7em"  />
    <van-field readonly required name="projectEstablishNumber" :value="fromdata.projectEstablishNumber" label="立项项目编号：" label-width="7em"  />
    <van-field readonly required name="customerCode" :value="fromdata.customerCode" label-width="7em" label="计费客户编码："/>
    <van-field readonly required name="customerName" :value="fromdata.customerName" label-width="7em" label="计费客户名称："/>
    <van-field readonly required name="vendorCode" :value="fromdata3.vendorCode" label-width="8em" label="合同相对方编码："/>
    <van-field readonly required name="vendorName" :value="fromdata3.vendorName" label-width="8em" label="合同相对方名称："/>
    <van-field readonly required name="custCode" :value="fromdata3.custCode" label-width="9.5em" label="交底esop客户编码："/>
    <van-field readonly required name="custName" :value="fromdata3.custName" label-width="9.5em" label="交底esop客户名称："/>
<!--    <van-field readonly required name="customerCode" :value="fromdata.customerCode" label="集团客户编号：" label-width="7em"/>-->
<!--    <van-field readonly required  autosize  type="textarea"  rows='1' name="customerName" :value="fromdata.customerName" label="集团客户名称："   label-width="7em"/>-->
    <van-field readonly required name="affirmStage" :value="fromdata.affirmStage" label="本次收入确认阶段：" label-width="9em"/>
    <van-field v-if="fromdata.projectServiceContent!='纯运维'" readonly required label-width='9em' name="checkSignatureDate" :value="fromdata.checkSignatureDate"
      label="客户验收签章日期："  />
    <van-field readonly required name="planFinishDate" :value="fromdata.planFinishDate" label="计划完成时间：" label-width="7em"/>
    <van-field readonly required name="deliverFinishDate" :value="fromdata.deliverFinishDate" label="实际(交付)时间："
      label-width="8em"  />

    <van-field readonly required name="upAndDown" :value="fromdata.upAndDown" label="是否存在上下游关系：" label-width="10em"
    :right-icon="isCWSPLocation?'arrow':''" @click="isCWSPLocation==true?showUpAndDownPop = true:''"
    placeholder="请选择是否存在上下游关系" :rules="[{ required: isCWSPLocation, message: '' }]"/>
    <van-popup v-model='showUpAndDownPop' round position="bottom" get-container="body" >
      <van-picker
      show-toolbar
      title="请选择"
      @cancel="showUpAndDownPop = false"
      :columns="UpAndDownPopColumns"
      @confirm="UpAndDownPopConfirm"/>
    </van-popup>
    <van-field required readonly  name="calculateMode" :value="fromdata.calculateMode" label-width="5em" label="计收模式："
     :right-icon="isCWSPLocation?'arrow':''" placeholder="请选择计费模式"  @click="isCWSPLocation==true?showCalculateModePop = true:''"
     :rules="[{ required: isCWSPLocation, message: '' }]"/>
    <van-popup v-model='showCalculateModePop' round position="bottom" get-container="body" >
      <van-picker
      show-toolbar
      title="请选择"
      @cancel="showCalculateModePop = false"
      :columns="CalculateModePopColumns"
      @confirm="CalculateModePopConfirm"/>
    </van-popup>
    <van-field  v-if="isCWSPLocation" readonly clickable required name="isAttention" :value="fromdata.isAttention" label-width="5em" label="是否关注："
     right-icon='arrow' placeholder="请选择是否关注"  @click="showIsAttentionPop = true"
    :rules="[{ required: true, message: '' }]" />
     <van-popup v-model='showIsAttentionPop' round position="bottom" get-container="body">
      <van-picker
      show-toolbar
      title="请选择"
      :columns="IsAttentionPopColumns"
      @cancel="showIsAttentionPop = false"
      @confirm="IsAttentionPopConfirm"/>
    </van-popup>
    <van-field readonly required name="autonomousImplemention" :value="fromdata.autonomousImplemention" label="是否自主实施:" label-width="7em" />
    <van-field readonly required name="autonomousImplementionType"
      :value="fromdata.autonomousImplementionType" label="项目自主实施类型:" label-width="9em" />
    <van-field v-if="fromdata.autonomousImplemention == '是'" readonly required name="autImplementScope"
        :value="fromdata.autImplementScope" label="自主实施范围:" label-width="7em" />
    <van-field readonly autosize  type="textarea"  rows='1' name="remark" :value="fromdata.remark" label-width="5em" label="情况说明："/>
    <van-field label-width="10em" readonly label="情况说明补充文件：" class="lyy-width" input-align="left" placeholder="" />
    <div v-for="(fileitem) in fromdata.explainFileList" :key="fileitem.id" style="margin-left:20px">
      <div readonly class="font14 fileLink" style="color:#0F85CF">
        <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
      </div>
    </div>

    <van-field v-if="fromdata.projectServiceContent!='纯运维'" label-width="10em" required readonly label="进度证明材料：" class="lyy-width" input-align="left" placeholder="" />
    <div v-if="fromdata.projectServiceContent!='纯运维'" v-for="(fileitem) in fromdata.scheduleFileList" :key="fileitem.id" style="margin-left:20px">
      <div readonly class="font14 fileLink" style="color:#0F85CF">
        <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
      </div>
    </div>

    <van-field v-if="fromdata.projectServiceContent=='纯运维'" label-width="10em" required readonly label="交维资产信息：" class="lyy-width" input-align="left" placeholder="" />
    <div v-if="fromdata.projectServiceContent=='纯运维'" v-for="(fileitem) in fromdata.assetsFile" :key="fileitem.id" style="margin-left:20px">
      <div readonly class="font14 fileLink" style="color:#0F85CF">
        <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
      </div>
    </div>

    <van-field label-width="10em" required readonly label="决策文件：" class="lyy-width" input-align="left" placeholder="" />
    <div v-for="(fileitem) in fromdata.descriptionFiles" :key="fileitem.id" style="margin-left:20px">
      <div readonly class="font14 fileLink" style="color:#0F85CF">
        <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
      </div>
    </div>

    <van-field label-width="10em" required readonly label="收入合同扫描件：" class="lyy-width" input-align="left" placeholder="" />
    <div v-for="(fileitem) in fromdata.incomeFileList" :key="fileitem.id" style="margin-left:20px">
      <div readonly class="font14 fileLink" style="color:#0F85CF">
        <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
      </div>
    </div>

    <van-field label-width="10em" required readonly label="支出合同扫描件：" class="lyy-width" input-align="left" placeholder="" />
    <div v-for="(fileitem) in fromdata.outcomeFileList" :key="fileitem.id" style="margin-left:20px">
      <div readonly class="font14 fileLink" style="color:#0F85CF">
        <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
      </div>
    </div>

    <!-- 项目进度 -->
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item"></div>
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">合同信息</span>
    </div>
    <!-- <div class="mb10">
      <div v-for="(item,index) in contractList" :key="index">  
        <div class="mt10 titletext pl10 font14">
          <span class="titletext">{{item.CONTRACTNAME}}_{{item.CONTRACTNO}}</span>
        </div>
        <div class="mt5 graytext pl10 font12">
          <span>收支合同类型:</span>
          <span class="titletext">{{item.CONTRACTINCEXPTYPE}}</span>
          <span>主执行人姓名:</span>
          <span class="titletext">{{item.CONTRACTEXECUTORNAME}}</span>
        </div>
        <div class="mt5 graytext pl10">
          <span>相对方:</span>
          <span class="titletext">{{item.VENDORCODE}}_{{item.VENDORNAME}}</span>
        </div>
        <div class="mt5 graytext pl10">
          <span>合同生效时间:</span>
          <span class="titletext">{{item.CONTRACTSIGNEDDATE}}</span>
        </div>
          <div class="mt5 graytext pl10">
          <span>履行开始时间:</span>
          <span class="titletext">{{item.CONTRACTSTATRADATE}}</span>
        </div>
        <div class="mt5 graytext pl10 border-b-1 pb5">
          <span>履行结束时间:</span>
          <span class="color-theme">{{item.CONTRACTENDDATE}}</span>
        </div>
      </div>
    </div> -->
    <el-table :data="contractList" border style="width: 100%;font-size: 12px;" class="tables">
      <el-table-column prop="CONTRACTINCEXPTYPE" label="收支合同类型" />
      <el-table-column prop="CONTRACTNO" label="合同编号" />
      <el-table-column prop="CONTRACTNAME" label="合同名称" />
      <el-table-column prop="CONTRACTEXECUTORNAME" label="主执行人姓名" />
      <el-table-column prop="VENDORCODE" label="相对方编码" />
      <el-table-column prop="VENDORNAME" label="相对方名称" />
      <el-table-column prop="CONTRACTSIGNEDDATE" label="合同生效时间" />
      <el-table-column prop="CONTRACTSTATRADATE" label="履行开始时间" />
      <el-table-column prop="CONTRACTENDDATE" label="履行结束时间" />
    </el-table>
    <!-- 本次计费科目信息 -->
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item"></div>
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">本次计费科目信息</span>
    </div>
    <!-- <div class="mb10">
      <div v-for="(item,index) in billingList" :key="index">  
        <div class="mt10 titletext pl10 font14 wb_all">
          <span class="titletext">{{item.splitSujectName}}_{{item.incomeId}}</span>
        </div>
        <div class="mt5 graytext pl10 font12 wb_all" >
          <span>关联订购序列号:</span>
          <span class="titletext">{{item.pmInsIdDaking}}</span>
          <span>_业务大类:</span>
          <span class="titletext">{{item.splitBusinessType}}</span>
        </div>
        <div class="mt5 graytext pl10 font12 flex_content_sb">
          <div style="width:50%">
            <span>是否属于通服收入:</span>
            <span class="titletext">{{item.isUniversal}}</span>
          </div>
          <div style="width:50%">
            <span>税率:</span>
            <span class="titletext">{{item.splitTaxRate}}</span>  
          </div>
        </div>
        <div class="mt5 graytext pl10 font12 flex_content_sb">
          <div style="width:50%">
            <span>含税总金额(元):</span>
            <span class="titletext">{{item.splitIncludedAmount}}</span>
          </div>
          <div style="width:50%">
            <span>不含税金额(元):</span>
            <span class="titletext">{{item.splitNoAmount}}</span>  
          </div>
        </div>
        <div class="mt5 graytext pl10 font12 flex_content_sb">
          <div style="width:50%">
            <span>计费时长(月):</span>
            <span class="titletext">{{item.billingTime}}</span>
          </div>
          <div style="width:50%">
            <span>合同约定计费阶段:</span>
            <span class="titletext">{{item.contractPhase}}</span>  
          </div>
        </div>
        <div class="mt5 graytext pl10 font12 flex_content_sb">
          <div style="width:50%">
            <span>预计计费起始日期:</span>
            <span class="titletext">{{item.splitStartDate}}</span>
          </div>
          <div style="width:50%">
            <span>预计计费结束日期:</span>
            <span class="titletext">{{item.splitEndDate}}</span>  
          </div>
        </div>
      </div>
    </div> -->
    <el-table :data="billingList" border style="width: 100%;font-size: 12px;" class="tables" >
      <el-table-column prop="customerCode" label="计费单位" />
      <el-table-column prop="customerName" label="计费单位名称" />
      <el-table-column prop="incomeId" label="序列号" />
      <el-table-column prop="pmInsIdDaking" label="关联订购序列号" />
      <el-table-column prop="splitBusinessType" label="业务大类" />
      <el-table-column prop="splitSujectName" label="收入账单名称" />
      <el-table-column prop="splitSujectCode" label="账单代码" />
      <el-table-column prop="isUniversal" label="是否属于通服收入" />
      <el-table-column prop="splitTaxRate" label="税率" />
      <el-table-column prop="splitIncludedAmount" label="含税总金额(元)" />
      <el-table-column prop="splitNoAmount" label="不含税金额(元)" />
      <el-table-column prop="billingTime" label="计费时长(月)" />
      <el-table-column prop="splitStartDate" label="预计计费起始日期" />
      <el-table-column prop="splitEndDate" label="预计计费结束日期" />
      <el-table-column prop="contractPhase" label="合同约定计费阶段" />
    </el-table>
    <historyAndSuggs id='target' :showHistory='showHistory'
            :historydata='historydata' :approveList='approveList' />
  </div>
</template>
 
<script>
import { openFileUrl } from '@/store/openFile'
import historyAndSuggs from "@/views/srqr/historyAndSuggs.vue"
export default {
  data() {
    return {
      showUpAndDownPop:false, 
      UpAndDownPopColumns:['是', '否'],
      showCalculateModePop:false, 
      CalculateModePopColumns:['主理人', '代理人'],
      showIsAttentionPop:false, 
      IsAttentionPopColumns:['是', '否'],
    }
  },
  props: ['fromdata','contractList','billingList','showHistory','historydata','approveList','location','fromdata3'],
  methods: {
     tomsg () {
      document.getElementById('target').scrollIntoView({ behavior: 'smooth' })
    },
    openFileUrlfun(value) {
      this.$router.push(
        {
          name: 'fileview',
          query: {
            openFileUrl: openFileUrl(value)
          }
        }
      );
    },
    UpAndDownPopConfirm(value) {
      this.showUpAndDownPop = false
      this.fromdata.upAndDown = value
    },
    CalculateModePopConfirm(value) {
      this.showCalculateModePop = false
      this.fromdata.calculateMode = value
    },
    IsAttentionPopConfirm(value) {
      this.showIsAttentionPop = false
      this.fromdata.isAttention = value
    },
  },
  computed: {
    isCWSPLocation: function () {
      return this.location=='dict.accountingApproval'
    },
  },
  components: {
    historyAndSuggs
  },
}
</script>
 
<style>
.tables.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 15px;
    padding-left: 5px;
    padding-right: 5px;
}
</style>